<template>
  <div class="detailslist">
    <div class="bgDiv">
      <div class="cruemb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/homes' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>杂项</el-breadcrumb-item>
          <el-breadcrumb-item>乐器杂项</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="titleList">
        <div class="titleListCont" v-for="item in contentTop" :key="item.id">
          <p class="titlep">{{ item.name }}:</p>
          <div class="contentDiv">
            <span class="spans" style="color: aqua">全部</span>
            <span
              class="spans"
              v-for="items in item.properties"
              :key="items.id"
              >{{ items.name }}</span
            >
          </div>
        </div>
      </div>
    </div>

    <div class="contentBox">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="默认排序" name="first">
          <ul class="listBom">
            <li v-for="item in contentBotm" :key="item.id">
              <img :src="item.picture" alt="" class="imgs" />
              <p class="p1">{{ item.name }}</p>
              <p class="p2">{{ item.desc }}</p>
              <p class="p3">${{ item.price }}</p>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="最新商品" name="second"
          ><ul class="listBom">
            <li v-for="item in contentBotm" :key="item.id">
              <img :src="item.picture" alt="" class="imgs" />
              <p class="p1">{{ item.name }}</p>
              <p class="p2">{{ item.desc }}</p>
              <p class="p3">${{ item.price }}</p>
            </li>
          </ul></el-tab-pane
        >
        <el-tab-pane label="最高人气" name="third"
          ><ul class="listBom">
            <li v-for="item in contentBotm" :key="item.id">
              <img :src="item.picture" alt="" class="imgs" />
              <p class="p1">{{ item.name }}</p>
              <p class="p2">{{ item.desc }}</p>
              <p class="p3">${{ item.price }}</p>
            </li>
          </ul></el-tab-pane
        >
        <el-tab-pane label="评论最多" name="fourth"
          ><ul class="listBom">
            <li v-for="item in contentBotm" :key="item.id">
              <img :src="item.picture" alt="" class="imgs" />
              <p class="p1">{{ item.name }}</p>
              <p class="p2">{{ item.desc }}</p>
              <p class="p3">${{ item.price }}</p>
            </li>
          </ul></el-tab-pane
        >
        <el-tab-pane label="价格排序" name="fourths"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailslist",
  data() {
    return {
      contentTop: {}, //类型数据
      activeName: "first",
      contentBotm: [], //下方数据(不全)
    };
  },
  created() {
    let _this = this;
    let data = JSON.parse(localStorage.getItem("itemData"));
    let obj = {
      id: parseInt(data.id),
    };
    this.user.getGoodsCont(obj).then((res) => {
      _this.contentTop = res.data.result.saleProperties;
    });
  },
  mounted() {
    let _this = this;
    this.user.postGoodBomCont().then((res) => {
      _this.contentBotm = res.data.result.items;
    });
  },
};
</script>

<style lang="less" scoped>
.bgDiv {
  width: 100%;
  .cruemb {
    width: 100%;
    height: 60px;
    background: red;
    display: flex;
    align-items: center;
  }
  .titleList {
    width: 100%;
    background: white;
    margin-top: 30px;
    padding: 30px 20;
    box-sizing: border-box;
    .titleListCont {
      width: 100%;
      overflow: hidden;
      .titlep {
        margin: 25px 0 0 20px;
        float: left;
        color: gray;
        font-size: 14px;
      }
      .contentDiv {
        width: 1100px;
        margin: 20px 0 0 20px;
        float: left;
        .spans {
          display: inline-block;
          width: 80px;
          height: 30px;
          margin-right: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 30px;
          font-size: 14px;
        }
        .spans:hover {
          color: aqua;
        }
      }
    }
  }
}
.contentBox {
  width: 1240px;
  margin: 20px 0;
  padding: 15px;
  box-sizing: border-box;
  .listBom {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    li {
      width: 220px;
      height: 300px;
      margin: 10px 0;
      overflow: hidden;
      .imgs {
        display: block;
        width: 170px;
        height: 170px;
        margin: 10px auto;
      }
      .p1,
      .p2,
      .p3 {
        text-align: center;
        width: 170px;
        height: 30px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .p1 {
        color: #333;
        font-size: 16px;
      }
      .p2 {
        color: #999;
        font-size: 14px;
      }
      .p3 {
        color: #fc4444;
        font-size: 20px;
      }
    }
  }
}
</style>